<template>
    <div>
        <div class="card card-custom gutter-b example example-compact" id="tableBody">
            <div class="card-header">
                <div class="card-title">
                    <div class="wizard-icon">
                        <span class="svg-icon svg-icon-2x">
                            <svg version="1.1" viewBox="0 0 24 24" height="24px" width="24px" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
                                <title xmlns="http://www.w3.org/2000/svg">Stockholm-icons / General / Thunder-move</title>
                                <desc xmlns="http://www.w3.org/2000/svg">Created with Sketch.</desc>
                                <defs xmlns="http://www.w3.org/2000/svg"></defs>
                                <g xmlns="http://www.w3.org/2000/svg" id="Stockholm-icons-/-General-/-Thunder-move" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                    <rect id="Rectangle-10" x="0" y="0" width="24" height="24"></rect>
                                    <path d="M16.3740377,19.9389434 L22.2226499,11.1660251 C22.4524142,10.8213786 22.3592838,10.3557266 22.0146373,
                                    10.1259623 C21.8914367,10.0438285 21.7466809,10 21.5986122,10 L17,10 L17,4.47708173 C17,4.06286817 16.6642136,3.72708173 16.25,3.72708173 C15.9992351,3.72708173 15.7650616,3.85240758 15.6259623,4.06105658 L9.7773501,12.8339749 C9.54758575,
                                    13.1786214 9.64071616,13.6442734 9.98536267,13.8740377 C10.1085633,13.9561715 10.2533191,14 10.4013878,14 L15,14 L15,19.5229183 C15,19.9371318 15.3357864,20.2729183 15.75,20.2729183 C16.0007649,20.2729183 16.2349384,20.1475924 16.3740377,19.9389434 Z" id="Path-3" fill="#000000"></path>
                                    <path d="M4.5,5 L9.5,5 C10.3284271,5 11,5.67157288 11,6.5 C11,7.32842712 10.3284271,8 9.5,8 L4.5,8 C3.67157288,8 3,
                                    7.32842712 3,6.5 C3,5.67157288 3.67157288,5 4.5,5 Z M4.5,17 L9.5,17 C10.3284271,17 11,17.6715729 11,18.5 C11,
                                    19.3284271 10.3284271,20 9.5,20 L4.5,20 C3.67157288,20 3,19.3284271 3,18.5 C3,17.6715729 3.67157288,17 4.5,
                                    17 Z M2.5,11 L6.5,11 C7.32842712,11 8,11.6715729 8,12.5 C8,13.3284271 7.32842712,14 6.5,14 L2.5,14 C1.67157288,14 1,13.3284271 1,12.5 C1,11.6715729 1.67157288,11 2.5,11 Z" id="Combined-Shape" fill="#000000" opacity="0.3"></path>
                                </g>
                            </svg>
                        </span>
                    </div>
                    <h3 class="card-label"> WEB应用集合 </h3>
                </div>
                <div class="card-toolbar">
                    <div class="example-tools justify-content-center">
                    </div>
                    <a href="javascript:;" @click="heapDump" class="btn btn-sm btn-clean btn-icon" title="导出堆栈快照" v-if="currentData">	                            
                        <span class="svg-icon svg-icon-primary svg-icon-2x">
                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                    <polygon points="0 0 24 0 24 24 0 24"/>
                                    <rect fill="#000000" opacity="0.3" x="11" y="3" width="2" height="14" rx="1"/>
                                    <path d="M6.70710678,10.7071068 C6.31658249,11.0976311 5.68341751,11.0976311 5.29289322,
                                    10.7071068 C4.90236893,10.3165825 4.90236893,9.68341751 5.29289322,9.29289322 L11.2928932,
                                    3.29289322 C11.6714722,2.91431428 12.2810586,2.90106866 12.6757246,3.26284586 L18.6757246,
                                    8.76284586 C19.0828436,9.13603827 19.1103465,9.76860564 18.7371541,10.1757246 C18.3639617,10.5828436 17.7313944,10.6103465 17.3242754,10.2371541 L12.0300757,5.38413782 L6.70710678,10.7071068 Z" fill="#000000" fill-rule="nonzero"/>
                                    <rect fill="#000000" opacity="0.3" x="3" y="19" width="18" height="2" rx="1"/>
                                </g>
                            </svg>
                        </span>	
                    </a>

                    
                    <a href="javascript:;" @click="webLog" class="btn btn-sm btn-clean btn-icon" title="日志" v-if="currentData">	   
                        <span data-toggle="tooltip" class="example-toggle"></span>
                    </a>

                    <a href="javascript:;" @click="threadDump" class="btn btn-sm btn-clean btn-icon" title="导出线程快照" v-if="currentData">	                            
                        <span class="svg-icon svg-icon-danger svg-icon-2x">
                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                    <polygon points="0 0 24 0 24 24 0 24"/>
                                    <rect fill="#000000" opacity="0.3" x="11" y="3" width="2" height="14" rx="1"/>
                                    <path d="M6.70710678,10.7071068 C6.31658249,11.0976311 5.68341751,11.0976311 5.29289322,
                                    10.7071068 C4.90236893,10.3165825 4.90236893,9.68341751 5.29289322,9.29289322 L11.2928932,
                                    3.29289322 C11.6714722,2.91431428 12.2810586,2.90106866 12.6757246,3.26284586 L18.6757246,
                                    8.76284586 C19.0828436,9.13603827 19.1103465,9.76860564 18.7371541,10.1757246 C18.3639617,10.5828436 17.7313944,10.6103465 17.3242754,10.2371541 L12.0300757,5.38413782 L6.70710678,10.7071068 Z" fill="#000000" fill-rule="nonzero"/>
                                    <rect fill="#000000" opacity="0.3" x="3" y="19" width="18" height="2" rx="1"/>
                                </g>
                            </svg>
                        </span>	
                    </a>

                    <a href="javascript:;" @click="webConsole" class="btn btn-sm btn-clean btn-icon" title="控制台" v-if="currentData">	   
                        <span data-toggle="tooltip" class="example-copy"></span>
                    </a>
                </div>
            </div>
            <div class="card-body">
                <div class="form-group m-form__group row">
                    <div class="col-md-4">                
                        
                        <!-- <div class="form-group m-form__group row">    
                            <div class="col-md-8">
                                <input type="text" class="form-control" placeholder="请输入应用名、ip、端口" v-model="filterText">
                            </div>
                        </div> -->
                       
                        <!-- style="background-color: #f3f6f9;" -->
                        <div class="form-group m-form__group row" >
                            
                            <!-- <el-tree 
                                class="filter-tree"
                                ref="tree"
                                default-expand-all
                                :data="webList" 
                                title="WEB应用服务" 
                                :props="defaultProps" 
                                :filter-node-method="filterNode"
                                @node-click="handleNodeClick">  
                            </el-tree> -->
                            
                            <el-table style="width: 100%;" default-expand-all stripe border highlight-current-row :data="webList"
                                ref="enquiry">
                                <el-table-column type="expand">
                                    <template slot-scope="scope">
                                        <el-table @row-click ="rowClick" :data="scope.row.children" align="center" :header-cell-style="{ background:'#fff',height:'20px',color:'#000000',}" >
                                            <el-table-column prop="data.applicationName" label="应用服务" show-overflow-tooltip></el-table-column>
                                            <el-table-column prop="data.port" label="端口" show-overflow-tooltip></el-table-column>
                                            <el-table-column prop="data.env" label="环境" show-overflow-tooltip></el-table-column>
                                            
                                        </el-table>
                                    </template>
                                </el-table-column>
                                <el-table-column label="序号" min-width="50">
                                    <template slot-scope="scope">
                                        {{ scope.$index + 1 }}
                                    </template>
                                </el-table-column>
                                <el-table-column align="center" prop="label" show-overflow-tooltip label="ip"
                                    min-width="100"></el-table-column>
                            </el-table>
                        </div>
                    </div>
                    <div class="col-md-8">
                        <form class="form" v-if="currentData">                            
                            <!--begin: 类加载 -->
                            <div
                            class="pb-5"
                            data-wizard-type="step-content"
                            data-wizard-state="current"
                            >
                                <h5 class="mb-10 font-weight-bold text-dark">
                                    服务名：<code>{{ currentData.applicationName }}</code> ip：<code>{{ currentData.clientIp }}</code> 端口：<code>{{ currentData.port }}</code>运行环境： <code>{{ currentData.env }}</code>
                                </h5>                                
                                <div class="form-group">
                                    <label>进程id</label>
                                    <input
                                    type="text"
                                    disabled
                                    class="form-control form-control-solid form-control-lg"
                                    v-model="formData.id"
                                    />
                                    <span class="form-text text-muted" >
                                    </span>
                                </div>
                                <div class="form-group">
                                    <label>时间</label>
                                    <input
                                    type="text"
                                    disabled
                                    class="form-control form-control-solid form-control-lg"
                                    v-model="formData.date"
                                    />
                                    <span class="form-text text-muted" >
                                    </span>
                                </div>
                                <div class="form-group">
                                    <label>载入了类的数量</label>
                                    <input
                                    disabled
                                    type="text"
                                    class="form-control form-control-solid form-control-lg"
                                    v-model="formData.loaded"
                                    />
                                    <span class="form-text text-muted" >
                                    </span>
                                </div>
                                <div class="form-group">
                                    <label>载入了类的合计</label>
                                    <input
                                    disabled
                                    type="text"
                                    class="form-control form-control-solid form-control-lg"
                                    v-model="formData.bytes1"
                                    />
                                    <span class="form-text text-muted" >
                                    </span>
                                </div>
                                <div class="form-group m-form__group row">
                                    <div class="col-xl-6">
                                        <div class="form-group">
                                            <label>卸载类的数量</label>
                                            <input
                                            disabled
                                            type="tel"
                                            class="form-control form-control-solid form-control-lg"
                                            v-model="formData.unloaded"
                                            />
                                            <span class="form-text text-muted" >
                                            </span>
                                        </div>
                                    </div>
                                    <div class="col-xl-6">
                                        <div class="form-group">
                                            <label>卸载类合计大小</label>
                                            <input
                                            disabled
                                            type="email"
                                            class="form-control form-control-solid form-control-lg"
                                            v-model="formData.bytes2"
                                            />
                                            <span class="form-text text-muted" >
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group m-form__group row">
                                    <div class="col-xl-6">
                                        <div class="form-group">
                                            <label>加载和卸载类总共的耗时</label>
                                            <input
                                            type="tel"
                                            disabled
                                            class="form-control form-control-solid form-control-lg"
                                            v-model="formData.time1"
                                            />
                                            <span class="form-text text-muted" >
                                            </span>
                                        </div>
                                    </div>
                                    <div class="col-xl-6">
                                        <div class="form-group">
                                            <label>编译任务执行的次数</label>
                                            <input
                                            disabled
                                            type="email"
                                            class="form-control form-control-solid form-control-lg"
                                            v-model="formData.compiled"
                                            />
                                            <span class="form-text text-muted" >
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group m-form__group row">
                                    <div class="col-xl-6">
                                        <div class="form-group">
                                            <label>编译失败的次数</label>
                                            <input
                                            type="tel"
                                            disabled
                                            class="form-control form-control-solid form-control-lg"
                                            v-model="formData.failed"
                                            />
                                            <span class="form-text text-muted" >
                                            </span>
                                        </div>
                                    </div>
                                    <div class="col-xl-6">
                                        <div class="form-group">
                                            <label>编译不可用的次数</label>
                                            <input
                                            type="email"
                                            disabled
                                            class="form-control form-control-solid form-control-lg"
                                            v-model="formData.invalid"
                                            />
                                            <span class="form-text text-muted" >
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label>编译的总耗时</label>
                                    <input
                                    type="text"
                                    disabled
                                    class="form-control form-control-solid form-control-lg"
                                    v-model="formData.time2"
                                    />
                                    <span class="form-text text-muted" >
                                    </span>
                                </div>                                
                            </div>
                            <!--end: 类加载-->
                        </form>      
                    </div>
                </div>
            </div>            
        </div>
    </div>
</template>
  
<script>
import { SET_BREADCRUMB } from "@/store/breadcrumbs.module";
import Swal from "sweetalert2";
import apiUtil from "@/core/util/apiUtil.js";
import { handleNotify, handleAlert, handleConfirm, showWating, closeWating,downloadFileCallFn } from "@/core/util/jehcUtil.js";
export default {
    data() {
        return {            
            webList: [],
            subList: [],
            expands: [],
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            filterText: '',
            searchForm: { ip: "" },
            sels: [], //当前选框选中的值
            currentText: "",      // 当前节点tree text
            currentType: "",    // 当前节点tree type
            currentId: "",   // 当前节点tree id
            currentData: "",//当前选中节点
            formData:{
                
            }
        }
    },
    components: {

    },
    watch: {
    //   filterText(val) {
    //     this.$refs.tree.filter(val);
    //   }
    },
    mounted() {
        this.$store.dispatch(SET_BREADCRUMB, [{ title: "类加载" }]);
        this.currentId="-1";
        this.currentText="";
        this.currentType="2";
        this.initTree();
    },
    methods: {
        // handleRowClick(row, event, column) {
        //     //点击行展开，enquiry为主表table的ref属性值
        //     this.$refs.enquiry.toggleRowExpansion(row);
        //     console.log("row",row);
        // },

        // filterNode(value, data) {
        //     if (!value) return true;
        //     return data.label.indexOf(value) !== -1;
        // },
        // handleSelectionChange(sels) {//获取选中的值
        //     this.sels = sels;
        // },
        
        search() {

        },
        resetAll() {
            Object.assign(this.$data.searchForm, this.$options.data().searchForm);
            this.search();
        },
        handleNodeClick(data) {
            var domId = data.id;
            var text = data.text;
            this.currentId = domId;
            this.currentText = text;
            if(!data.children){
                this.showDetail(data.data);
                this.currentData = data.data;
            }else{
                this.currentData = null;
            }
        },
        rowClick(row, event, column){
            console.log(row,event,column)
            this.handleNodeClick(row);
        },
        initTree() {            
            let params = {};
            apiUtil.query(process.env.VUE_APP_OMP_API + "/actuator/server/list", params).then(({ data }) => {
                if (undefined == data.data || null == data.data || "" == data.data) {
                } else {
                    this.doTree(data.data);
                    return;                    
                }
            });
        },
        doTree(data){
            if(data){
                let treeList = [];
                for(let i in data){
                    let obj = {};                
                    obj.label = data[i].ip;    
                    obj.icon = 'folder-blue';
                    let actuatorVOS = data[i].actuatorVOS;
                    let children = [];
                    if(actuatorVOS){
                        for(let j in actuatorVOS){
                            let childrenObj = {};
                            childrenObj.label = actuatorVOS[j].applicationName+" | "+actuatorVOS[j].port+""+" | "+actuatorVOS[j].env+"";
                            childrenObj.data = actuatorVOS[j];
                            children.push(childrenObj);
                        }
                    }
                    obj.children = children;
                    treeList.push(obj);
                }     
                this.webList = treeList;
            }
        },
        showDetail(data){
            let params = {};
            params.clientIp = data.clientIp;
            params.applicationName = data.applicationName;
            params.clientHttpPrefix = data.clientHttpPrefix;
            params.env = data.env;
            params.hasPrefixApplicationName = data.hasPrefixApplicationName;
            params.port = data.port;
            params.status = data.status;
            showWating({renderBody:"tableBody"});
            apiUtil.get(process.env.VUE_APP_OMP_API + "/actuator/server/classLoad",params).then(({ data }) => {
                this.formData = data.data;
            });
        },
        heapDump(){
            this.$confirm("确定导出堆栈快照：（ip："+this.currentData.clientIp+"，应用："+this.currentData.applicationName+"，端口："+this.currentData.port+"，运行环境"+this.currentData.env+"?", "提示", {type: "warning",}).then(() => {
                let data = this.currentData;
                let params = ""// 后台接口需要的参数
                let url = process.env.VUE_APP_OMP_API+"/actuator/server/heap/dump?clientIp="+data.clientIp+"&applicationName="+data.applicationName+"&clientHttpPrefix="+data.clientHttpPrefix+"&hasPrefixApplicationName="+data.hasPrefixApplicationName+"&port="+data.port; // 请求接口
                let method = "GET"; // 请求方式 GET或POST
                let fileName = data.clientIp+"-"+data.applicationName+"-"+data.port+".hprof"; // 下载后的文件名称
                downloadFileCallFn(url, method, fileName,params);
            }).catch(()=>{});//注意这里，这里是重点！！！;   
        },
        threadDump(){
            this.$confirm("确定导出线程快照：（ip："+this.currentData.clientIp+"，应用："+this.currentData.applicationName+"，端口："+this.currentData.port+"，运行环境"+this.currentData.env+"?", "提示", {type: "warning",}).then(() => {
                let data = this.currentData;
                let params = ""// 后台接口需要的参数
                let url = process.env.VUE_APP_OMP_API+"/actuator/server/thread/dump?clientIp="+data.clientIp+"&applicationName="+data.applicationName+"&clientHttpPrefix="+data.clientHttpPrefix+"&hasPrefixApplicationName="+data.hasPrefixApplicationName+"&port="+data.port; // 请求接口
                let method = "GET"; // 请求方式 GET或POST
                let fileName = data.clientIp+"-"+data.applicationName+"-"+data.port+".txt"; // 下载后的文件名称
                downloadFileCallFn(url, method, fileName,params);
            }).catch(()=>{});//注意这里，这里是重点！！！;   
        },
        webLog(){//web日志

        },
        webConsole(){//web控制台

        },
    }
};
</script>
<style scoped>
.v-sheet.v-card:not(.v-sheet--outlined) {
    -webkit-box-shadow: 0px 3px 1px -2px #fff, 0px 2px 2px 0px #fff, 0px 1px 5px 0px #fff !important;
    box-shadow: 0px 3px 1px -2px #fff, 0px 2px 2px 0px #fff, 0px 1px 5px 0px #fff !important;
    
}
.theme--light.v-tabs > .v-tabs-bar {
    background-color: #f3f6f9 !important;
}

/deep/ .el-tree-node__label {
    font-size: 0.87rem;
    font-weight: 400;
    line-height: 1.375rem;
    letter-spacing: .0071428571em;
}

/deep/ .el-tree-node__content{
    height: 46px !important;
}
.card.card-custom {
    box-shadow: 0px 0px 30px 0px rgba(255, 255, 255, 1) !important;
    border: 0;
}
</style>